import { Card } from './card.tsx';
import { MemorySvg } from '@/components/memory-svg/index.tsx';
// import { ComputerSvg } from '@/components/computer-svg/index.tsx';
import { Progress } from '@/components/progress/index.tsx';
import { useGetMemory } from './useGetMemory.ts';

import styles from './overview.module.scss';
import {useEffect, useState} from "react";


type MemoryInfo = {
  usageTxt: string;
  useSwapTxt: string;
  usagePercentage:number;
  usageSwapPercentage:number;
}

function Overview() {
  const { memory } = useGetMemory();
  const [memoryInfo, setMemoryInfo] = useState<MemoryInfo>();


  useEffect(() => {
    if (memory) {
      const gb = 1024 * 1024 * 1024;
      const totalMemoryGb = memory.total_memory / gb;
      const usageMemoryGb = memory.used_memory / gb;
      const totalSwapMemoryGb = memory.total_swap / gb;
      const usageSwapMemoryGb = memory.used_swap / gb;

      setMemoryInfo({
        usageTxt: `${usageMemoryGb.toFixed(2)}GB /  ${totalMemoryGb.toFixed(2)}GB`,
        usagePercentage: Number(((memory.used_memory / memory.total_memory) * 100).toFixed(2)),
        useSwapTxt: `${usageSwapMemoryGb.toFixed(2)}GB /  ${totalSwapMemoryGb.toFixed(2)}GB`,
        usageSwapPercentage:  Number(((memory.used_swap / memory.total_swap) * 100).toFixed(2)),
      })
    }
  }, [memory]);

  return (
    <div className={styles['overview-wrap']}>
      <Card title="系统内存" icon={MemorySvg({ width: 16, height: 16 })}>
        <Progress topText={memoryInfo?.usageTxt ?? '--'} progress={memoryInfo?.usagePercentage ?? 0} bottomText={`使用率：${memoryInfo?.usagePercentage ?? 0}%`} />
      </Card>

      <Card title="cpu使用率" icon={MemorySvg({ width: 16, height: 16 })}>
        <Progress topText="26.6%" progress={40} bottomText="实时cpu负载" />
      </Card>

      {/*<Card title="系统状态" icon={ComputerSvg({ width: 16, height: 16 })}>*/}
      {/*  <div className={styles['system-status']}>*/}
      {/*    <p className={styles['system-status-normal']}>正常</p>*/}
      {/*    <span className={styles['system-status-text']}>系统运行正常</span>*/}
      {/*  </div>*/}
      {/*</Card>*/}
      <Card title="虚拟内存" icon={MemorySvg({ width: 16, height: 16 })}>
        <Progress topText={memoryInfo?.useSwapTxt ?? '--'} progress={memoryInfo?.usageSwapPercentage ?? 0} bottomText={`使用率：${memoryInfo?.usageSwapPercentage ?? 0}%`} />
      </Card>
    </div>
  );
}


export { Overview };